<app-scale [cluster]="currentCluster" (confirm)="handleScale()"></app-scale>
<app-add-worker (confirm)="handleAddWorker()" [currentCluster]="currentCluster" ></app-add-worker>
<app-remove-worker (confirm)="handleRemoveWorker()"></app-remove-worker>
<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-md-6 clr-col-6">
    <div class="card">
      <div class="card-header">
        集群状态
      </div>
      <div class="card-block card-style">
        <div class="clr-row" *ngIf="loading" style="margin-top: 10%">
          <div class="clr-col-12" align="center">
            <span class="spinner spinner-lg loading">
              Loading...
            </span>
          </div>
          <div class="clr-col-12" align="center">
            <small>
              如果加载时间过长 可能是组件出现错误 请耐心等待
            </small>
          </div>
        </div>
        <table class="table" *ngIf="!loading">
          <tbody>
          <tr *ngFor="let c of componentData">
            <td>{{c.name}}</td>
            <td [ngStyle]="{'color':c.status | statusColor }">{{c.status | status}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer" style="text-align:right">
        <button class="btn btn-sm btn-link" (click)="toHealth()">更多</button>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-6 clr-col-md-6 clr-col-6">
    <div class="card">
      <div class="card-header">
        Worker 状态
        <span style="float: right;font-size:12px">数量: {{workers.length}} </span>
      </div>
      <div class="card-block" style="height: 200px;overflow:auto">
        <table class="table">
          <tbody>
          <tr *ngFor="let worker of workers">
            <td>{{worker.name}}</td>
            <td [ngClass]="{'worker-status-running': worker.status ==='RUNNING'}">{{worker.status | status}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer" style="text-align:right">
        <button *ngIf="currentCluster.deploy_type==='AUTOMATIC'" class="btn btn-sm btn-link" (click)="onScale()"
                [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'">伸缩
        </button>
        <button *ngIf="currentCluster.deploy_type==='MANUAL'" [disabled]="currentCluster.status !== 'RUNNING' || permission==='VIEWER'"
                class="btn btn-sm btn-link" (click)="onAddWorker()">扩容
        </button>
        <button *ngIf="currentCluster.deploy_type==='MANUAL'"
                [disabled]="(currentCluster.status !== 'RUNNING' || workers.length === 1 || permission==='VIEWER')"
                class="btn btn-sm btn-link" (click)="onRemoveWorker()">缩容
        </button>
      </div>
    </div>
  </div>

</div>
